import React from 'react';
import {Table, Card, Spin} from 'antd';
import PropTypes from 'prop-types';
import {Link} from 'react-router-dom';
import routes from './routes';
import {formatAmount} from '../utils';
import {TABLE, COMMON_TABLE_QUERY_FAIL_TEXT, COMMON_TABLE_EMPTY_TEXT} from '../constants';

export class TablePanel extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            loading: false
        };
    }
    render() {
        const {formatMessage} = this.props.intl;
        const locale = {
            emptyText: this.props.hasError ? COMMON_TABLE_QUERY_FAIL_TEXT : COMMON_TABLE_EMPTY_TEXT
        };
        const columns = [{
            title: formatMessage({
                id: 'tablePanel.column.num',
                defaultMessage: '序号'
            }),
            dataIndex: 'num',
        }, {
            title: formatMessage({
                id: 'tablePanel.column.dealerCode',
                defaultMessage: '总代'
            }),
            dataIndex: 'dealerCode',
            render: (text, record) => <Link to={routes.detail.format(record.dealerId)} >{text}</Link>
        }, {
            title: formatMessage({
                id: 'tablePanel.column.country',
                defaultMessage: '国家'
            }),
            dataIndex: 'country',
        }, {
            title: formatMessage({
                id: 'tablePanel.column.varietyQuantity',
                defaultMessage: '品种'
            }),
            dataIndex: 'varietyQuantity'
        }];
        const columns2 = [{
            title: formatMessage({
                id: 'tablePanel.column.num',
                defaultMessage: '序号'
            }),
            dataIndex: 'num',
        }, {
            title: formatMessage({
                id: 'tablePanel.column.dealerCode',
                defaultMessage: '总代'
            }),
            dataIndex: 'dealerCode',
            render: (text, record) => <Link to={routes.detail.format(record.dealerId)} >{text}</Link>
        }, {
            title: formatMessage({
                id: 'tablePanel.column.country',
                defaultMessage: '国家'
            }),
            dataIndex: 'country',
        }, {
            title: formatMessage({
                id: 'tablePanel.column.amount',
                defaultMessage: '金额'
            }),
            dataIndex: 'amount',
            render: text => `$${formatAmount(text)}`
        }];
        const columns3 = [{
            title: formatMessage({
                id: 'tablePanel.column.num',
                defaultMessage: '序号'
            }),
            dataIndex: 'num',
        }, {
            title: formatMessage({
                id: 'tablePanel.column.dealerCode',
                defaultMessage: '总代'
            }),
            dataIndex: 'dealerCode',
            render: (text, record) => <Link to={routes.detail.format(record.dealerId)} >{text}</Link>
        }, {
            title: formatMessage({
                id: 'tablePanel.column.country',
                defaultMessage: '国家'
            }),
            dataIndex: 'country',
        }, {
            title: formatMessage({
                id: 'tablePanel.column.packing',
                defaultMessage: '包装单元'
            }),
            dataIndex: 'packing'
        }];
        return (
            <div>
                <Spin spinning={this.props.loading}>
                    <Card.Grid
                        style={{
                            width: '33%',
                            marginBottom: 15}}>
                        <Table
                            className={'white-space-nowrap'}
                            columns={columns}
                            dataSource={this.props.varietyQuantityContents}
                            loading={this.props.loading || this.state.loading}
                            rowKey="num"
                            locale={locale}
                            pagination={false}
                            {...TABLE}/>
                    </Card.Grid>
                    <Card.Grid
                        style={{
                            width: '33%',
                            marginBottom: 15,
                            marginLeft: 12}}>
                        <Table
                            className={'white-space-nowrap'}
                            columns={columns2}
                            dataSource={this.props.amountContents}
                            rowKey="num"
                            locale={locale}
                            pagination={false}
                            {...TABLE}/>
                    </Card.Grid>
                    <Card.Grid
                        style={{
                            width: '32%',
                            marginBottom: 15,
                            marginLeft: 12}}>
                        <Table
                            className={'white-space-nowrap'}
                            columns={columns3}
                            dataSource={this.props.packingContents}
                            loading={this.props.loading || this.state.loading}
                            rowKey="num"
                            locale={locale}
                            pagination={false}
                            {...TABLE}/>
                    </Card.Grid>
                </Spin>
            </div>
        );
    }
}
TablePanel.propTypes = {
    varietyQuantityContents: PropTypes.array.isRequired,
    amountContents: PropTypes.array.isRequired,
    packingContents: PropTypes.array.isRequired,
    hasError: PropTypes.string.isRequired,
    loading: PropTypes.bool.isRequired,
    intl: PropTypes.object,
};
import {connect} from 'react-redux';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';
import {injectIntl} from './intl';

const varietyQuantityContent = selectorFactory(['page', 'domainData', 'list', 'varietyQuantityContent']);
const amountContent = selectorFactory(['page', 'domainData', 'list', 'amountContent']);
const packingContent = selectorFactory(['page', 'domainData', 'list', 'packingContent']);
const mapStateToProps = state => ({
    varietyQuantityContents: varietyQuantityContent(state),
    amountContents: amountContent(state),
    packingContents: packingContent(state),
    loading: state.getIn(['page', 'domainData', 'list', 'isFetching']),
    hasError: state.getIn(['page', 'domainData', 'list', 'hasError']),
});


export default connect(mapStateToProps, null)(injectIntl(TablePanel));


